<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>grid-template-areas应用</title>
		<style type="text/css">
			#box{
				width: 400px;
				height: 300px;
				display: grid;    /*定义为网格布局*/
				background: burlywood;
				grid-template-rows:repeat(3,1fr);   /* 将网格分为三行,行高都一样*/
				grid-template-columns:repeat(3,1fr);   /*将网格分为三列,列宽都一样*/
				/*grid-template-areas: 'a b b'
                      				 'a b b'
                    				 'a c c';	*/
                /*复合写法*/
                /* grid-template: 
                'a b b' 1fr
                'a b b' 1fr
                'a c c' 1fr
                /1fr 1fr 1fr; */
                
                grid-column-gap:10px; /*设置列之间的间隔*/
                grid-row-gap:20px;   /*设置行之间的间隔*/
              	/*间隔的复合写法:第一个值为行间隔,第二个值为列间隔
              	grid-gap:20px 10px;   */
                
			}
			#box div{
				background-color: rgba(255, 255, 255, 0.8);
				border: 1px solid red;
 				font-size: 30px;	
			}
			#box div:nth-of-type(1){grid-area:a ;}
			#box div:nth-of-type(2){grid-area:b ;}
			#box div:nth-of-type(3){grid-area:c ;}
		</style>
	</head>
	<body>
		<div id="box">
			<div>1</div>
			<div>2</div>
			<div>3</div>
		</div>
	</body>
</html>
